// Switch 开关

// 尺寸
@mixin e-switch-size($margin, $width, $height, $line-height, $space, $checked-tick-pos, $icon-font-size) {
    input:empty ~ span {
        line-height: $height;
        margin: $margin;
        height: $height;
        width: $width + $space;
        border-radius: ($height/2);
    }

    input:empty ~ span:before,
    input:empty ~ span:after {
        width: $width;
        border-radius: ($height/2);
    }

    input:empty ~ span:after {
        height: $height - 2 * $space;
        width: $height - 2 * $space;
        line-height: $line-height;
        top: $space;
        bottom: $space;
        margin-left: $space;
        font-size: $icon-font-size;
        text-align: center;
        vertical-align: middle;
    }

    input:checked ~ span:after {
        margin-left: $checked-tick-pos;
    }
}

// 皮肤
@mixin e-switch-skin() {
    $base-color: #e8ebf1;

    .e-switch {
        input:empty ~ span:before {
            background-color: $base-color;
        }

        input:empty ~ span:after {
            color: lighten($base-color, 5%);
            background-color: #fff;
        }

        // 选中状态
        input:checked {
            ~ span:before {
                background-color: $base-color;
            }

            ~ span:after {
                background-color: e-state-color(brand, base);
                color: e-state-color(brand, inverse);
            }
        }

        input[disabled] {
            cursor: not-allowed;

            ~ span:after,
            ~ span:before {
                cursor: not-allowed;
                opacity: .7;
            }
        }

        // 状态
        @each $name, $color in $e-state-colors {
            &.e-switch-#{$name}:not(.e-switch--outline) {
                input:empty ~ span:before {
                    background-color: e-get($color, base);
                }

                input:empty ~ span:after {
                    color: e-get($color, base);
                    background-color: e-get($color, inverse);
                    opacity: .4;
                }

                input:checked {
                    ~ span:before {
                        background-color: e-get($color, base);
                    }

                    ~ span:after {
                        opacity: 1;
                    }
                }
            }

            // 边框风格
            &.e-switch--outline.e-switch-#{$name} {
                input:empty ~ span:before {
                    border: 2px solid darken($base-color, 3%);
                    background-color: $base-color;
                }

                input:empty ~ span:after {
                    color: e-get($color, inverse);
                    background-color: e-get($color, panel);
                }

                input:checked {
                    ~ span:before {
                        background-color: e-get($color, inverse);
                    }

                    ~ span:after {
                        background-color: e-get($color, base);
                        opacity: 1;
                    }
                }
            }
        }
    }
}

// Component Base
.e-switch  {
    display: inline-block;
    font-size: 1rem;
    > label {
        margin-bottom: 0;
    }
    input:empty {
        margin-left: -999px;
        height: 0;
        width: 0;
        overflow: hidden;
        position: absolute;
        opacity: 0;
    }

    input:empty ~ span {
        display: inline-block;
        position: relative;
        float: left;
        width: 1px;
        text-indent: 0;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    input:empty ~ span:before,
    input:empty ~ span:after {
        position: absolute;
        display: block;
        top: 0;
        bottom: 0;
        left: 0;
        content: ' ';
        -webkit-transition: all 100ms ease-in;
        transition: all 100ms ease-in;
    }

    // State icons
    &.e-switch--icon {
        input:empty ~ span:after {
            @include e-la-icon-self('\f342');
        }

        input:checked ~ span:after {
            content: '\f17b';
        }
    }

    // State icons
    &.e-switch--icon-check {
        input:checked ~ span:after {
            @include e-la-icon-self('\f17b');
        }
    }

    // 默认尺寸
    & {
        $e-switch-margin: 0;
        $e-switch-width: 54px;
        $e-switch-height: 30px;
        $e-switch-line-height: 26px;
        $e-switch-space: 3px;
        $e-switch-checked-tick-pos: 26px;
        $e-switch-icon-font-size: .9em;

        @include e-switch-size(
            $e-switch-margin,
            $e-switch-width,
            $e-switch-height,
            $e-switch-line-height,
            $e-switch-space,
            $e-switch-checked-tick-pos,
            $e-switch-icon-font-size
        );
    }

    // 大尺寸
    &.e-switch--lg {
        $e-switch-margin: 0;
        $e-switch-width: 72px;
        $e-switch-height: 40px;
        $e-switch-line-height: 34px;
        $e-switch-space: 3px;
        $e-switch-checked-tick-pos: 34px;
        $e-switch-icon-font-size: 1em;

        @include e-switch-size(
            $e-switch-margin,
            $e-switch-width,
            $e-switch-height,
            $e-switch-line-height,
            $e-switch-space,
            $e-switch-checked-tick-pos,
            $e-switch-icon-font-size
        );
    }

    // 小尺寸
    &.e-switch--sm {
        $e-switch-margin: 0;
        $e-switch-width: 38px;
        $e-switch-height: 24px;
        $e-switch-line-height: 20px;
        $e-switch-space: 2px;
        $e-switch-checked-tick-pos: 16px;
        $e-switch-icon-font-size: .8em;

        @include e-switch-size(
            $e-switch-margin,
            $e-switch-width,
            $e-switch-height,
            $e-switch-line-height,
            $e-switch-space,
            $e-switch-checked-tick-pos,
            $e-switch-icon-font-size
        );
    }

    // Form group
    .form-group.row & {
        margin-top: .15rem;

        &.e-switch--lg {
            margin-top: 0;
            position: relative;
            top: -.3rem;
        }

        &.e-switch--sm {
            margin-top: .3rem;
        }
    }
}

// Component Skin
@include e-switch-skin();